<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript对象</title>
</head>
<body>
    <h1>JavaScript对象</h1>
    <p>JavaScript一切皆对象，对象的属性与方法</p>
    <script>
        //JavaScript中一切皆对象
        document.write(`${(1).toString()}<br>`);
        document.write(`${("123").toString()}<br>`);
        document.write(`${true.toString()}<br>`);
        document.write(`${[1,2,3].toString()}<br>`);
        document.write(`${(function(){}).toString()}<br>`);
        document.write(`${{a:123}.toString()}<br>`);
        document.write(`<br>`);
        
        //JavaScript创建对象
        //对象字面量{}
        let obj={}; //空对象
        document.write(`${obj.toString()}<br>`);
        let student={
            id:1,
            name:"张三",
            age:18,
        };
        for (const key in student) {
            if (Object.hasOwnProperty.call(student, key)) {
                document.write(`${key}:${student[key]}<br>`);
            }
        }

        let animal={
            id:1,
            name:"狗",
            action:function(){
                return "跑"
            }
        };
        document.write(`${animal.action()}<br>`);
        document.write(`<br>`);

        //使用new 以及 构造函数
        let obj2=new Object();
        document.write(`${obj2}<br>`);
        let arr=new Array();
        document.write(`${arr.length}<br>`);
        let date=new Date();
        document.write(`${date.toLocaleDateString()}<br>`);

        function Student(id,name,age){
            this.id=id;
            this.name=name;
            this.age=age;
        }
        let student2=new Student(2,"李四",19);
        for (const key in student) {
            if (Object.hasOwnProperty.call(student2, key)) {
                document.write(`${key}:${student2[key]}<br>`);
            }
        }

        function Animal(id,name){
            this.id=id;
            this.name=name;
        }
        //原型链
        Animal.prototype.action=function(){
            return "跑";
        }
        Animal.prototype.toString=function(){
            return `id:${this.id},name:${this.name}`;
        }

        let animal2=new Animal(2,"猫");
        document.write(`${animal2},${animal2.action()}<br>`);
        document.write(`<br>`);

        //Object.create创建对象
        let obj3=Object.create({});
        document.write(`${obj3.toString()}<br>`);

        let animal3=Object.create(animal);
        document.write(`${animal3},${animal3.action()}<br>`);

        //ES6语法：class关键字定义 -- 面向对象语言很类似
        class Animal2{
            constructor(id,name){
                this.id=id;
                this.name=name;
            }

            action(){
                return "跑";
            }

            toString(){
                return `id:${this.id},name:${this.name}`;
            }
        }

        let animal4 =new Animal2(3,"马");
        document.write(`${animal4},${animal4.action()}<br>`);
        document.write(`<br>`);

        //访问对象的属性和方法  可以通过点“.”访问
        animal4.id=5;
        document.write(`${animal4},${animal4.action()}<br>`);
        //访问对象的属性和方法  可以通过中括号“[]”访问，支持变量访问
        animal4["id"]=6;
        document.write(`${animal4},${animal4.action()}<br>`);
        let key="id";
        animal4[key]=7;
        document.write(`${animal4},${animal4.action()}<br>`);
        document.write(`${animal4},${animal4["action"]()}<br>`);

        //对象的属性与方法可以动态添加,动态地删除自由属性
        let obj4={};
        obj4.id=8;
        obj4.name="王五"
        obj4.getName=function(){
            return this.name;
        }
        document.write(`${obj4.getName()}<br>`);
        delete obj4.getName;  //删除属性
        // document.write(`${obj4.getName()}<br>`); //访问出错
    </script>
</body>
</html>